<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题探讨 - 金零社</title>
    <!-- 使用本地或国内CDN资源替换原有的国际CDN -->
    <link href="../../../static/element/font-awesome.css" rel="stylesheet">
    <!-- 如果本地没有font-awesome，可以使用国内CDN -->
    <!-- <link href="https://cdn.bootcss.com/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #1a1a2e;
            color: #e2e8f0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 聊天应用容器 */
        .chat-app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #1e293b;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }

        /* 顶部导航 */
        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .chat-icon {
            font-size: 24px;
            background-color: white;
            color: #9C27B0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-title {
            font-size: 18px;
            font-weight: 600;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        /* 服务器负载显示 */
        .server-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .server-status:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        .server-status-icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .server-status-icon.normal {
            background-color: #10B981; /* 绿色 */
        }

        .server-status-icon.warning {
            background-color: #F59E0B; /* 黄色 */
        }

        .server-status-icon.danger {
            background-color: #EF4444; /* 红色 */
        }

        .server-status-text {
            font-size: 14px;
            white-space: nowrap;
        }

        .server-status-details {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #374151;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            min-width: 200px;
            padding: 12px 16px;
            display: none;
            z-index: 1000;
            margin-top: 8px;
        }

        .server-status-details.show {
            display: block;
        }

        .server-status-details-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .server-status-details-item:last-child {
            margin-bottom: 0;
        }

        .server-status-details-label {
            color: #D1D5DB;
        }

        .server-status-details-value {
            color: #E5E7EB;
            font-weight: 500;
        }

        .server-status-details-value.warning {
            color: #F59E0B;
        }

        .server-status-details-value.danger {
            color: #EF4444;
        }

        /* 在线用户显示 */
        .online-users {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            position: relative;
        }

        .online-users:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        .online-users-count {
            background-color: #10B981;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
        }

        .online-users-list {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #374151;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            min-width: 200px;
            max-width: 250px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            z-index: 1000;
            margin-top: 8px;
        }

        .online-users-list.show {
            display: block;
        }

        .online-users-header {
            padding: 12px 16px;
            border-bottom: 1px solid #4B5563;
            font-weight: 600;
            color: #D1D5DB;
        }

        .online-user-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            transition: background-color 0.2s ease;
        }

        .online-user-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .online-user-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #9C27B0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
        }

        .online-user-info {
            flex: 1;
            min-width: 0;
        }

        .online-user-name {
            font-size: 14px;
            color: #E5E7EB;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .online-user-status {
            font-size: 12px;
            color: #10B981;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .online-user-status::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #10B981;
        }

        /* 当前用户高亮样式 */
        .current-user {
            background-color: rgba(255, 215, 0, 0.15);
            border-left: 3px solid #FFD700;
        }
        
        .current-user-avatar {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: #2D3748;
            font-weight: bold;
        }
        
        .current-user-name {
            color: #FFD700;
            font-weight: 600;
            position: relative;
        }

        /* 聊天消息区域 */
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #1e293b;
            position: relative;
        }

        /* 系统消息 */
        .system-message {
            text-align: center;
            color: #94a3b8;
            font-size: 14px;
            margin: 10px 0;
        }

        .system-message span {
            display: inline-block;
            padding: 5px 10px;
            background-color: rgba(156, 39, 176, 0.2);
            border-radius: 12px;
            color: #e2e8f0;
        }

        /* 消息行容器 */
        .message-row {
            display: flex;
            margin-bottom: 15px;
            animation: fadeIn 0.3s ease;
        }

        .message-row.my-message {
            justify-content: flex-end;
        }

        .message-row.other-message {
            justify-content: flex-start;
        }

        /* 头像 */
        .message-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: #ccc;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
        }

        .message-row.my-message .message-avatar {
            margin-right: 0;
            margin-left: 8px;
        }

        /* 消息气泡容器 */
        .message-content {
            max-width: 70%;
            display: flex;
            flex-direction: column;
        }

        .message-row.my-message .message-content {
            align-items: flex-end;
        }

        .message-row.other-message .message-content {
            align-items: flex-start;
        }

        /* 用户名 */
        .message-username {
            font-size: 12px;
            color: #94a3b8;
            margin-bottom: 4px;
            padding: 0 10px;
        }

        /* 消息气泡 */
        .message-bubble {
            padding: 10px 15px;
            border-radius: 18px;
            position: relative;
            word-wrap: break-word;
            line-height: 1.4;
            max-width: 100%;
        }

        .message-row.my-message .message-bubble {
            background-color: #7B1FA2;
            border-bottom-right-radius: 4px;
            color: #fff;
        }

        .message-row.other-message .message-bubble {
            background-color: #334155;
            border-bottom-left-radius: 4px;
            color: #e2e8f0;
        }

        /* 时间 */
        .message-time {
            font-size: 11px;
            color: #64748b;
            margin-top: 4px;
            padding: 0 10px;
        }

        /* 消息状态 */
        .message-status {
            font-size: 12px;
            margin-left: 5px;
        }

        .message-status.sending {
            color: #999;
        }

        .message-status.sent {
            color: #9C27B0;
        }

        .message-status.read {
            color: #7B1FA2;
        }

        /* 输入区域 */
        .chat-input {
            padding: 15px 20px;
            background-color: #1e293b;
            border-top: 1px solid #334155;
        }

        .input-container {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            background-color: #334155;
            border-radius: 24px;
            padding: 5px 15px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .input-tools {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #94a3b8;
        }

        .input-tools i {
            cursor: pointer;
            font-size: 18px;
            transition: color 0.3s ease;
        }

        .input-tools i:hover {
            color: #9C27B0;
        }

        .message-input {
            flex: 1;
            border: none;
            outline: none;
            padding: 10px 0;
            font-size: 15px;
            resize: none;
            max-height: 100px;
            overflow-y: auto;
            background-color: #334155;
            color: #e2e8f0;
        }

        .send-button {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .send-button:hover {
            background: linear-gradient(135deg, #7B1FA2, #9C27B0);
        }

        .send-button i {
            font-size: 16px;
        }

        /* 欢迎语样式 */
        .welcome-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            padding: 30px 50px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            z-index: 1000;
            opacity: 0;
            animation: welcomeFadeIn 0.8s ease-out forwards;
            max-width: 80%;
            word-wrap: break-word;
        }

        .welcome-message .location {
            color: #FFD700;
            font-size: 28px;
            margin: 10px 0;
        }

        .welcome-message .subtitle {
            font-size: 16px;
            margin-top: 15px;
            opacity: 0.9;
        }

        /* 参数丢失提示弹窗 */
        .param-error-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #FF4081, #F50057);
            color: white;
            padding: 30px 50px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            z-index: 1000;
            max-width: 80%;
            word-wrap: break-word;
        }

        .param-error-modal button {
            margin-top: 20px;
            padding: 10px 30px;
            background: white;
            color: #FF4081;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            font-weight: 600;
            transition: transform 0.2s ease;
        }

        .param-error-modal button:hover {
            transform: scale(1.05);
        }

        /* 待解锁状态遮罩层 */
        .unlock-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            color: #e2e8f0;
            text-align: center;
            padding: 20px;
        }

        .unlock-overlay .icon {
            font-size: 64px;
            margin-bottom: 20px;
            color: #9C27B0;
        }

        .unlock-overlay h2 {
            font-size: 28px;
            margin-bottom: 20px;
            color: #f8fafc;
        }

        .unlock-overlay p {
            font-size: 18px;
            margin-bottom: 30px;
            max-width: 600px;
            line-height: 1.6;
            color: #cbd5e1;
        }

        .unlock-overlay .highlight {
            color: #fde047;
            font-weight: bold;
        }

        .unlock-overlay button {
            padding: 12px 30px;
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            cursor: pointer;
            font-weight: 600;
            transition: transform 0.2s ease;
        }

        .unlock-overlay button:hover {
            transform: scale(1.05);
        }

        /* 加载更多消息 */
        .load-more {
            text-align: center;
            margin: 10px 0;
        }

        .load-more button {
            background-color: transparent;
            border: 1px solid #475569;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 13px;
            color: #94a3b8;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .load-more button:hover {
            background-color: #334155;
        }

        /* 动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes welcomeFadeIn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes welcomeFadeOut {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.8);
            }
        }

        .welcome-message.fade-out {
            animation: welcomeFadeOut 0.5s ease-in forwards;
        }

        /* 滚动条样式 */
        .chat-messages::-webkit-scrollbar,
        .message-input::-webkit-scrollbar {
            width: 6px;
        }

        .chat-messages::-webkit-scrollbar-track,
        .message-input::-webkit-scrollbar-track {
            background: transparent;
        }

        .chat-messages::-webkit-scrollbar-thumb,
        .message-input::-webkit-scrollbar-thumb {
            background: rgba(156, 39, 176, 0.3);
            border-radius: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover,
        .message-input::-webkit-scrollbar-thumb:hover {
            background: rgba(156, 39, 176, 0.5);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .chat-app {
                max-width: 100%;
            }

            .message-content {
                max-width: 85%;
            }

            .chat-header {
                padding: 10px 15px;
            }

            .chat-messages {
                padding: 15px;
            }

            .chat-input {
                padding: 10px 15px;
            }
            
            .unlock-overlay h2 {
                font-size: 24px;
            }
            
            .unlock-overlay p {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<!-- 待解锁状态遮罩层 -->
<div id="unlockOverlay" class="unlock-overlay" style="display: none;">
    <div class="icon">
        <i class="fas fa-lock"></i>
    </div>
    <h2>功能待解锁</h2>
    <p>您需要通过他人的邀请才能完整使用系统功能</p>
    <p>如有疑问，请联系客服获取帮助</p>
    <button id="contactSupportBtn">联系客服</button>
</div>

<!-- 修改昵称弹窗 -->
<div id="changeNicknameModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; justify-content: center; align-items: center;">
    <div style="background: linear-gradient(135deg, #9C27B0, #7B1FA2); color: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); width: 90%; max-width: 400px; text-align: center;">
        <h3 style="margin-bottom: 20px; font-size: 20px;">修改昵称</h3>
        <input type="text" id="nicknameInput" style="width: 100%; padding: 12px; border: none; border-radius: 5px; font-size: 16px; margin-bottom: 20px;" placeholder="请输入新昵称（1-20字符）">
        <div style="display: flex; gap: 10px; justify-content: center;">
            <button id="cancelNicknameBtn" style="padding: 10px 20px; border: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0.2); color: white; cursor: pointer; font-size: 16px; transition: background-color 0.3s;">取消</button>
            <button id="confirmNicknameBtn" style="padding: 10px 20px; border: none; border-radius: 5px; background-color: white; color: #9C27B0; cursor: pointer; font-size: 16px; font-weight: 600; transition: background-color 0.3s;">确认</button>
        </div>
    </div>
</div>

<!-- 欢迎语弹窗 -->
<div id="welcomeModal" class="welcome-message" style="display: none;">
    <div>欢迎来到</div>
    <div class="location" id="selectedProvince">主题探讨</div>
    <div class="subtitle">与志同道合的朋友愉快交流吧！</div>
</div>

<!-- 参数丢失提示弹窗 -->
<div id="paramErrorModal" class="param-error-modal" style="display: none;">
    <div><i class="fas fa-exclamation-circle"></i> 参数错误</div>
    <div class="subtitle" style="margin-top: 20px;">页面参数不正确，请重新进入</div>
    <button id="reselectBtn">返回首页</button>
</div>

<!-- 聊天应用容器 -->
<div class="chat-app" id="chatApp">
    <!-- 顶部导航 -->
    <div class="chat-header">
        <div class="header-left">
            <div class="chat-icon">
                <i class="fas fa-comments"></i>
            </div>
            <div class="chat-title">聊天室</div>
        </div>
        <div class="header-right">
            <!-- 服务器负载显示 -->
            <div class="server-status" id="serverStatus">
                <div class="server-status-icon normal" id="serverStatusIcon"></div>
                <div class="server-status-text" id="serverStatusText">服务器状态</div>
            </div>
            
            <div class="online-users" id="onlineUsers">
                <i class="fas fa-circle" style="color: #10B981; font-size: 12px;"></i>
                <span>在线</span>
                <div class="online-users-count" id="onlineUsersCount">0</div>
                <div class="online-users-list" id="onlineUsersList">
                    <div class="online-users-header">在线用户</div>
                    <div id="onlineUsersItems"></div>
                </div>
            </div>
            <!-- region-selector已移除 -->
        </div>
    </div>
    
    <!-- 聊天消息区域 -->
    <div class="chat-messages" id="messageContainer">
        <div class="load-more" id="loadMoreContainer">
            <button id="loadMoreBtn">加载更多消息</button>
        </div>
        <div class="system-message">
            <span>欢迎来到金零社！在这里可以与所有用户交流</span>
        </div>
        <!-- 示例消息 -->
        <div class="message-row other-message">
            <div class="message-avatar" style="background-color: #9C27B0;">
                <i class="fas fa-user text-white"></i>
            </div>
            <div class="message-content">
                <div class="message-username">系统通知</div>
                <div class="message-bubble">
                    欢迎加入这个有意思的群聊！在这里可以与所有用户交流。
                </div>
                <div class="message-time">刚刚</div>
            </div>
        </div>
    </div>
    
    <!-- 输入区域 -->
    <div class="chat-input">
        <div class="input-container">
            <textarea class="message-input" id="messageInput" placeholder="输入消息..." rows="1"></textarea>
            <button class="send-button" id="sendButton" title="发送消息">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>
</div>

<!-- 全局ESC键监听脚本 -->
<script src="../../../js/global_escape_listener.js"></script>
<!-- 使用本地fontawesome或者国内CDN -->
<script src="../../../static/element/fontawesome.js"></script>
<!-- 如果本地没有，可以使用国内CDN -->
<!-- <script src="https://cdn.bootcss.com/font-awesome/5.15.4/js/all.min.js"></script> -->
<!--连接服务-->
<script>
    // 获取URL参数
    function getUrlParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name);
    }

    // 页面加载完成后初始化区域显示
    document.addEventListener('DOMContentLoaded', function() {
        
        // 初始化用户信息
        initUserInfo();
        
        // 检查是否有必要的参数
        const hasRequiredParams = checkRequiredParams();
        
        if (!hasRequiredParams) {
            // 显示待解锁状态
            showUnlockOverlay();
            return;
        }
        
        // 初始化服务器状态显示
        updateServerStatus();
        
        // 由于region-selector已移除，这里不再需要初始化区域显示
        
        // 获取并显示主题信息
        const topic = getUrlParam('topic'); // 聊天室主题
        const noteParam = getUrlParam('note'); // 获取概述参数
        if (topic) {
            // 显示主题在标题栏 - 可以根据需要修改header-left或添加适当的元素
            const headerLeftElement = document.querySelector('.header-left');
            if (headerLeftElement) {
                // 检查是否已有chat-title元素
                let chatTitleElement = headerLeftElement.querySelector('.chat-title');
                if (!chatTitleElement) {
                    // 创建标题元素
                    chatTitleElement = document.createElement('div');
                    chatTitleElement.className = 'chat-title';
                    chatTitleElement.style.marginLeft = '10px';
                    chatTitleElement.style.fontWeight = 'bold';
                    headerLeftElement.appendChild(chatTitleElement);
                }
                chatTitleElement.textContent = topic;
            }
            
            // 更新页面标题
            document.title = topic + ' - 金零社';
            
            // 显示主题在欢迎消息中
            const selectedProvinceElement = document.getElementById('selectedProvince');
            if (selectedProvinceElement) {
                selectedProvinceElement.textContent = topic;
            }
        }
        
        // 如果有note参数，可以将其显示在某个概述区域（这里可以根据需要扩展）
        if (noteParam) {
            // 可以在这里添加代码将note显示在界面上
        }
        
        // 显示欢迎弹窗
        showWelcomeModal();
        
        // 初始化服务器状态显示
        updateServerStatus();
        
        // 添加服务器状态点击事件
        const serverStatus = document.getElementById('serverStatus');
        
        if (serverStatus) {
            serverStatus.addEventListener('click', function() {
                // 直接跳转到监控页面，而不是显示详情
                const topicParam = getUrlParam('topic') || 'default';
                window.open(`mx_monitor_server.html?topic=${encodeURIComponent(topicParam)}`, '_blank');
            });
        }
        
        // 添加客服管理链接
        const headerRight = document.querySelector('.header-right');
        if (headerRight) {
            const manageLink = document.createElement('a');
            manageLink.href = 'mx_chat_manage.html';
            manageLink.target = '_blank';
            manageLink.style.cssText = `
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 20px;
                cursor: pointer;
                transition: background-color 0.3s ease;
                text-decoration: none;
                color: white;
                font-size: 14px;
            `;
            manageLink.innerHTML = `
                <i class="fas fa-headset"></i>
                <span>联系客服</span>
            `;
            manageLink.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
            });
            manageLink.addEventListener('mouseleave', function() {
                this.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
            });
            headerRight.insertBefore(manageLink, headerRight.firstChild);
        }
        
        // 检查是否为局域网用户，如果是则显示管理后台入口
        checkIfLocalNetworkUser();
    });

    // 检查是否为局域网用户
    function checkIfLocalNetworkUser() {
        // 获取用户IP信息
        fetch('/api/chat/ip-info')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    const ip = data.data.ip || '';
                    // 检查是否为局域网IP
                    if (isLocalNetworkIP(ip)) {
                        showAdminPanelLink();
                    }
                }
            })
            .catch(error => {
                console.error('获取IP信息失败:', error);
                // 如果获取失败，尝试从localStorage中获取之前保存的信息
                const savedIP = localStorage.getItem('userIP');
                if (savedIP && isLocalNetworkIP(savedIP)) {
                    showAdminPanelLink();
                }
            });
    }
    
    // 判断是否为局域网IP
    function isLocalNetworkIP(ip) {
        // 局域网IP范围:
        // 10.0.0.0 - 10.255.255.255
        // 172.16.0.0 - 172.31.255.255
        // 192.168.0.0 - 192.168.255.255
        // 127.0.0.0 - 127.255.255.255 (本地回环)
        
        if (!ip) return false;
        
        // 检查IPv4地址
        if (ip.includes('.')) {
            const parts = ip.split('.').map(Number);
            if (parts.length !== 4) return false;
            
            // 10.x.x.x
            if (parts[0] === 10) return true;
            
            // 172.16.x.x - 172.31.x.x
            if (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) return true;
            
            // 192.168.x.x
            if (parts[0] === 192 && parts[1] === 168) return true;
            
            // 127.x.x.x (本地回环)
            if (parts[0] === 127) return true;
            
            return false;
        }
        
        // 对于IPv6，简单检查是否以::1或::ffff:开头
        if (ip.startsWith('::1') || ip.startsWith('::ffff:')) {
            return true;
        }
        
        return false;
    }
    
    // 显示管理后台链接
    function showAdminPanelLink() {
        const headerRight = document.querySelector('.header-right');
        if (headerRight) {
            // 检查是否已经添加了管理链接
            if (document.getElementById('adminPanelLink')) return;
            
            const adminLink = document.createElement('a');
            adminLink.id = 'adminPanelLink';
            adminLink.href = 'mx_chat_manage.html';
            adminLink.target = '_blank';
            adminLink.style.cssText = `
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 12px;
                background-color: rgba(255, 215, 0, 0.2); /* 金色背景 */
                border-radius: 20px;
                cursor: pointer;
                transition: background-color 0.3s ease;
                text-decoration: none;
                color: #FFD700; /* 金色文字 */
                font-size: 14px;
                margin-right: 10px;
                border: 1px solid #FFD700;
            `;
            adminLink.innerHTML = `
                <i class="fas fa-cog"></i>
                <span>管理后台</span>
            `;
            adminLink.addEventListener('mouseenter', function() {
                this.style.backgroundColor = 'rgba(255, 215, 0, 0.3)';
            });
            adminLink.addEventListener('mouseleave', function() {
                this.style.backgroundColor = 'rgba(255, 215, 0, 0.2)';
            });
            
            // 插入到联系客服链接之前
            const contactLink = headerRight.querySelector('a');
            if (contactLink) {
                headerRight.insertBefore(adminLink, contactLink);
            } else {
                headerRight.insertBefore(adminLink, headerRight.firstChild);
            }
        }
    }

    // 检查是否有所需参数
    function checkRequiredParams() {
        // 检查topic参数是否有效
        const topic = getUrlParam('topic');
        // topic不能为空且长度应在1-50个字符之间
        if (!topic || topic.trim().length === 0 || topic.length > 50) {
            return false;
        }
        return true;
    }

    // 显示待解锁状态
    function showUnlockOverlay() {
        const unlockOverlay = document.getElementById('unlockOverlay');
        const chatApp = document.getElementById('chatApp');
        
        if (unlockOverlay) {
            unlockOverlay.style.display = 'flex';
        }
        
        // 添加联系客服按钮事件监听
        const contactSupportBtn = document.getElementById('contactSupportBtn');
        if (contactSupportBtn) {
            // 移除可能存在的重复事件监听器
            contactSupportBtn.onclick = null;
            contactSupportBtn.addEventListener('click', function() {
                alert('请联系客服获取帮助');
            });
        }
        
        // 禁用聊天应用的交互
        if (chatApp) {
            chatApp.style.display = 'none';
        }
    }

    // 显示欢迎弹窗
    function showWelcomeModal() {
        const welcomeModal = document.getElementById('welcomeModal');
        if (welcomeModal) {
            welcomeModal.style.display = 'block';
            
            // 3秒后隐藏欢迎弹窗
            setTimeout(() => {
                welcomeModal.classList.add('fade-out');
                setTimeout(() => {
                    welcomeModal.style.display = 'none';
                }, 500);
            }, 3000);
        }
    }

    // 初始化页面区域显示 - 由于region-selector已移除，此函数已简化
    function initRegionDisplay() {
        // 可以在这里添加其他初始化逻辑，如果需要的话
    }

    // 更新服务器状态显示
    function updateServerStatus() {
        // 只获取服务器状态，不在当前页面显示详细信息
        fetch('/api/chat/system/info')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    const info = data.data;
                    const isOverloaded = info.overloaded;
                    const cpuUsage = info.cpuUsage;
                    const memoryUsage = info.memoryUsage;

                    // 更新状态图标和文本
                    const statusIcon = document.getElementById('serverStatusIcon');
                    const statusText = document.getElementById('serverStatusText');

                    // 根据使用率确定状态类别
                    let statusClass = 'normal';
                    let statusLabel = '服务器正常';
                    if (isOverloaded) {
                        statusClass = 'danger';
                        statusLabel = '服务器满载';
                    } else if (cpuUsage > 80 || memoryUsage > 80) {
                        statusClass = 'warning';
                        statusLabel = '负载偏高';
                    }

                    // 更新状态图标
                    statusIcon.className = 'server-status-icon ' + statusClass;
                    statusText.textContent = statusLabel;
                }
            })
            .catch(error => {
                console.error('获取服务器状态失败:', error);
                // 出错时显示默认状态
                const statusIcon = document.getElementById('serverStatusIcon');
                const statusText = document.getElementById('serverStatusText');
                statusIcon.className = 'server-status-icon normal';
                statusText.textContent = '服务器状态';
            });
    }

    // 联系客服按钮事件已在showUnlockOverlay函数中处理
    // 保留此注释以说明功能位置

    // 重新选择地区后触发事件
    document.getElementById('reselectBtn').addEventListener('click', function() {
        window.location.href = '../../../index.html';
    });

    // 轮询变量
    let pollingTimer = null;
    let userId = null;
    let userProvince = null;
    let userIP = null;
    let lastMessageId = 0; // 追踪最后一条消息的ID，用于轮询获取新消息
    
    // 服务器配置
    const SERVER_CONFIG = {
        primary: {
            baseUrl: 'https://2025.task2030.xyz/api/chat', // 后端服务器地址
            timeout: 10000 // 10秒超时（增加超时时间）
        },
        backup: {
            baseUrl: 'https://zjnh.yamhk.top/api/chat', // 备用服务器
            timeout: 12000 // 12秒超时（增加超时时间）
        },
        current: 'primary', // 当前使用的服务器
        retryCount: 0,
        maxRetries: 3 // 增加最大重试次数
    };
    
    // 测试模式开关，用于开发测试
    const ENABLE_TEST_MODE = false; // 设置为true启用测试模式
    
    // 统一API调用函数，支持失败切换到备用服务器和跨域处理
    async function apiCall(endpoint, options = {}) {
        // 确保options存在并有默认值
        options = { ...options };
        
        // 全面的跨域请求配置（对所有服务器都启用CORS配置）
        options.credentials = 'include'; // 包含cookies，处理跨域认证
        options.mode = 'cors'; // 对所有服务器都使用cors模式
        options.cache = 'no-cache'; // 禁用缓存以确保请求实时性
        
        // 设置默认headers，包括跨域请求所需的头信息
        options.headers = {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest', // 标识为Ajax请求
            // 可接受的响应类型，确保服务器知道客户端能处理JSON
            'Access-Control-Request-Headers': 'Content-Type, Accept, X-Requested-With',
            ...options.headers
        };
        
        // 获取当前服务器配置
        const server = SERVER_CONFIG[SERVER_CONFIG.current];
        // 确保URL正确拼接
        const url = server.baseUrl ? (server.baseUrl + endpoint) : endpoint;
        
        // 添加跨域调试信息
        console.log(`API调用详情：`);
        console.log(`- 服务器：${SERVER_CONFIG.current} (${server.baseUrl})`);
        console.log(`- 请求URL：${url}`);
        console.log(`- 请求方式：${options.method || 'GET'}`);
        console.log(`- 跨域模式：${options.mode}`);
        console.log(`- 携带凭证：${options.credentials}`);
        console.log(`- 请求头：`, options.headers);
        
        // 测试模式：模拟主服务器失败
        if (ENABLE_TEST_MODE && SERVER_CONFIG.current === 'primary') {
            // 增加重试计数
            SERVER_CONFIG.retryCount++;
            
            if (SERVER_CONFIG.retryCount >= SERVER_CONFIG.maxRetries) {
                SERVER_CONFIG.current = 'backup';
                SERVER_CONFIG.retryCount = 0;
                showSystemMessage('主服务器暂时不可用，已切换到备用服务器 [测试模式]');
            }
            throw new Error('[测试模式] 模拟主服务器连接失败');
        }
        
        try {
            // 添加超时处理
            const controller = new AbortController();
            const timeoutId = setTimeout(() => {
                controller.abort();
                console.log(`请求超时 ${SERVER_CONFIG.current} (${url})`);
            }, server.timeout);
            
            console.log(`发送请求到 ${SERVER_CONFIG.current}: ${url}`);
            
            const response = await fetch(url, {
                ...options,
                signal: controller.signal
            });
            
            clearTimeout(timeoutId);
            
            // 检查响应状态
            if (!response.ok) {
                console.error(`响应错误: ${response.status} ${response.statusText}`);
                throw new Error(`HTTP错误! 状态码: ${response.status}`);
            }
            
            // 检查响应类型
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                const data = await response.json();
                // 重置重试计数
                SERVER_CONFIG.retryCount = 0;
                console.log(`成功获取响应: ${SERVER_CONFIG.current}`);
                return data;
            } else {
                // 如果返回非JSON格式，抛出错误
                const text = await response.text();
                console.error(`非JSON响应: ${text.substring(0, 200)}`);
                throw new Error('服务器返回非JSON响应: ' + text.substring(0, 100));
            }
        } catch (error) {
            console.error(`API调用失败 [${SERVER_CONFIG.current}]:`, error);
            
            // 改进错误信息并识别跨域错误
            let errorMsg = error.message;
            if (errorMsg.includes('aborted')) {
                errorMsg = `请求超时（${SERVER_CONFIG.current}服务器无响应）`;
            } else if (errorMsg.includes('NetworkError')) {
                errorMsg = `网络错误（${SERVER_CONFIG.current}服务器连接失败）`;
            } else if (errorMsg.includes('CORS') || errorMsg.includes('cross-origin')) {
                errorMsg = `跨域错误（${SERVER_CONFIG.current}服务器CORS配置问题）`;
                console.error('跨域错误详情:', error);
            }
            
            // 增加重试计数
            SERVER_CONFIG.retryCount++;
            
            // 检查是否需要切换服务器
            if (SERVER_CONFIG.retryCount >= SERVER_CONFIG.maxRetries && SERVER_CONFIG.current === 'primary') {
                SERVER_CONFIG.current = 'backup';
                SERVER_CONFIG.retryCount = 0;
                showSystemMessage('主服务器暂时不可用，已切换到备用服务器');
                
                // 使用备用服务器重试前，移除可能导致跨域问题的配置
                const backupOptions = { ...options };
                delete backupOptions.headers['Access-Control-Request-Headers']; // 移除可能冲突的头信息
                
                try {
                    return await apiCall(endpoint, backupOptions);
                } catch (backupError) {
                    // 备用服务器也失败，尝试降级方案
                    console.error('备用服务器也失败:', backupError);
                    
                    // 尝试使用简单请求模式（不发送预检请求）
                    const simpleOptions = { 
                        ...backupOptions,
                        headers: {
                            'Accept': 'application/json' // 只保留必需的头信息
                        },
                        mode: 'cors'
                    };
                    
                    // 对于GET请求，尝试使用JSONP方式作为最后的降级方案
                    if (options.method === 'GET' || !options.method) {
                        return new Promise((resolve, reject) => {
                            console.log('尝试使用JSONP方式获取数据...');
                            showSystemMessage('网络连接不稳定，尝试使用备用连接方式...');
                            
                            const callbackName = 'jsonpCallback_' + Date.now();
                            window[callbackName] = (data) => {
                                delete window[callbackName];
                                resolve(data);
                            };
                            
                            const script = document.createElement('script');
                            const server = SERVER_CONFIG.backup;
                            const url = server.baseUrl ? (server.baseUrl + endpoint) : endpoint;
                            script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + callbackName;
                            script.onerror = () => {
                                delete window[callbackName];
                                reject(new Error('JSONP请求也失败了'));
                            };
                            
                            document.head.appendChild(script);
                            setTimeout(() => {
                                if (window[callbackName]) {
                                    delete window[callbackName];
                                    document.head.removeChild(script);
                                    reject(new Error('JSONP请求超时'));
                                }
                            }, server.timeout);
                        });
                    }
                    
                    // 对于非GET请求，尝试不同的内容类型
                    simpleOptions.headers['Content-Type'] = 'text/plain'; // 使用text/plain避免预检请求
                    return apiCall(endpoint, simpleOptions);
                }
            }
            
            // 如果已经在使用备用服务器或者重试次数不足，抛出错误
            throw new Error(errorMsg);
        }
    }

    // 用户信息初始化现在在第一个DOMContentLoaded事件监听器中统一处理
    // 保留此注释以说明功能位置

    // 用户信息全局变量
    // userId, userProvince, userIP 已在轮询变量部分声明
    let userNickname = ''; // 用户昵称

    // 初始化用户信息
    function initUserInfo() {
        const savedUser = localStorage.getItem('chatUserInfo');
        if (savedUser) {
            try {
                const userInfo = JSON.parse(savedUser);
                userId = userInfo.userId;
                userProvince = userInfo.userProvince;
                userIP = userInfo.userIP;
                userNickname = userInfo.userNickname || userId; // 如果没有昵称，使用userId
                
                // 每次刷新页面时更新用户所在省份
                updateProvinceInfo();
                
                // 初始化轮询
                initPolling();
                // 更新用户信息界面
                updateUserInfo();
            } catch (error) {
                console.error('解析用户信息失败:', error);
                generateNewUserInfo();
                // 即使生成新用户后也要初始化轮询
                initPolling();
            }
        } else {
            generateNewUserInfo();
            // 即使生成新用户后也要初始化轮询
            initPolling();
        }
    }

    // 更新用户省份信息
    function updateProvinceInfo() {
        // 省份信息改为由后端获取，前端不再主动获取
    }

    // 生成新的用户信息
    function generateNewUserInfo() {
        // 检查是否已经有用户ID在localStorage中
        const savedUser = localStorage.getItem('chatUserInfo');
        if (savedUser) {
            try {
                const userInfo = JSON.parse(savedUser);
                userId = userInfo.userId;
                userProvince = userInfo.userProvince;
                userIP = userInfo.userIP;
                userNickname = userInfo.userNickname || userId;
        
                return;
            } catch (error) {
                console.error('解析已存在的用户信息失败:', error);
            }
        }
        
        // 只有在没有已存在用户信息的情况下才创建新用户
        userId = 'user_' + Math.random().toString(36).substring(2, 10);
        userProvince = '未知省份'; // 省份信息改为由后端获取
        userIP = ''; // IP信息改为由后端获取
        userNickname = userId; // 默认使用userId作为昵称
        
        // 保存用户信息到localStorage（不包含省份和IP信息的获取）
        saveUserInfo();
        
    }

    // 保存用户信息到localStorage
    function saveUserInfo() {
        // 确保userId存在再保存
        if (userId) {
            const userInfo = {
                userId: userId,
                userProvince: userProvince,
                userIP: userIP,
                userNickname: userNickname
            };
            localStorage.setItem('chatUserInfo', JSON.stringify(userInfo));

        } else {
            console.warn('userId为空，跳过保存用户信息');
        }
    }

    // 更新用户信息界面
    function updateUserInfo() {
        // 此函数目前为空，因为用户信息显示已在页面加载时完成
    }
    
    // 显示修改昵称弹窗
    function showChangeNicknameModal() {
        const modal = document.getElementById('changeNicknameModal');
        const nicknameInput = document.getElementById('nicknameInput');
        const confirmBtn = document.getElementById('confirmNicknameBtn');
        const cancelBtn = document.getElementById('cancelNicknameBtn');
        
        if (modal && nicknameInput && confirmBtn && cancelBtn) {
            // 填充当前昵称
            nicknameInput.value = userNickname;
            nicknameInput.select();
            
            // 显示弹窗
            modal.style.display = 'flex';
            
            // 确认昵称修改函数
            function confirmNicknameChange() {
                const newNickname = nicknameInput.value.trim();
                if (newNickname && newNickname.length >= 1 && newNickname.length <= 20) {
                    // 更新用户昵称
                    userNickname = newNickname;
                    // 保存到localStorage
                    saveUserInfo();
                    // 刷新在线用户列表显示
                    updateOnlineUsers();
                    // 显示系统消息
                    showSystemMessage('您的昵称已更改为: ' + userNickname);
                    // 关闭弹窗
                    modal.style.display = 'none';
                    return true;
                } else {
                    alert('昵称长度应在1-20个字符之间');
                    return false;
                }
            }
            
            // 取消修改函数
            function cancelNicknameChange() {
                modal.style.display = 'none';
                return true;
            }
            
            // 点击确认按钮
            confirmBtn.onclick = confirmNicknameChange;
            
            // 点击取消按钮
            cancelBtn.onclick = cancelNicknameChange;
            
            // 点击弹窗外部关闭
            function handleModalClick(e) {
                if (e.target === modal) {
                    cancelNicknameChange();
                }
            }
            modal.onclick = handleModalClick;
            
            // 添加回车键触发确认功能
            function handleKeyPress(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    confirmNicknameChange();
                }
            }
            nicknameInput.addEventListener('keypress', handleKeyPress);
            
            // 添加ESC键关闭弹窗功能
            function handleEscapeKey(e) {
                if (e.key === 'Escape') {
                    cancelNicknameChange();
                }
            }
            document.addEventListener('keydown', handleEscapeKey);
            
            // 清理事件监听器，避免内存泄漏
            function cleanupListeners() {
                nicknameInput.removeEventListener('keypress', handleKeyPress);
                document.removeEventListener('keydown', handleEscapeKey);
                modal.onclick = null;
                confirmBtn.onclick = null;
                cancelBtn.onclick = null;
            }
            
            // 监听弹窗关闭事件
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.attributeName === 'style' && modal.style.display === 'none') {
                        cleanupListeners();
                        observer.disconnect();
                    }
                });
            });
            observer.observe(modal, { attributes: true });
        }
    }

    // 初始化轮询
    function initPolling() {
        // 加入聊天室
        joinChat();
        
        // 获取聊天室主题
        const topic = getUrlParam('topic');
        
        // 启动轮询，每5秒检查一次新消息
        const initTopic = getUrlParam('topic');
        if (initTopic && initTopic.trim().length > 0) {
            pollingTimer = setInterval(function() {
                pollForNewMessages();
            }, 5000);
        } else {
    
        }
        
        // 定期获取在线用户列表，每分钟更新一次
        if (initTopic && initTopic.trim().length > 0) {
            setInterval(function() {
                updateOnlineUsers();
            }, 60000); // 每分钟更新一次
        } else {
    
        }
        
        // 启动心跳机制，每30秒发送一次心跳
        if (initTopic && initTopic.trim().length > 0 && userId) {
            setInterval(function() {
                sendHeartbeat();
            }, 30000); // 每30秒发送一次心跳
        }
        
        // 启动服务器状态监控，每分钟更新一次
        setInterval(function() {
            updateServerStatus();
        }, 60000); // 每分钟更新一次
        
    
        showSystemMessage('已连接到聊天服务');
    }

    // 加入聊天室
    async function joinChat() {
        try {
            const topic = getUrlParam('topic');
            const joinData = {
                userId: userId,
                topic: topic,
                province: userProvince
            };

            const endpoint = '/join';
            const data = await apiCall(endpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(joinData)
            });
            
    
            if (data.success) {
                // 获取历史消息
                loadChatHistory();
                // 立即更新一次在线用户列表
                setTimeout(updateOnlineUsers, 1000);
            } else {
                // 处理后端返回的错误信息
                if (data.message && data.message.includes('系统满载')) {
                    showSystemMessage('系统当前负载较高，暂不支持新用户加入，请稍后再试');
                    // 显示系统满载提示
                    showSystemOverloadedMessage();
                } else {
                    showSystemMessage('加入聊天室失败: ' + (data.message || '未知错误'));
                }
            }
        } catch (error) {
            console.error('加入聊天室失败', error);
            showSystemMessage('当前无法连接到服务器: ' + error.message);
        }
    }
    
    // 显示系统满载提示
    function showSystemOverloadedMessage() {
        // 创建系统满载提示元素
        const overlay = document.createElement('div');
        overlay.id = 'systemOverloadedOverlay';
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            color: #e2e8f0;
            text-align: center;
            padding: 20px;
        `;
        
        overlay.innerHTML = `
            <div style="font-size: 64px; margin-bottom: 20px; color: #9C27B0;">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h2 style="font-size: 28px; margin-bottom: 20px; color: #f8fafc;">系统繁忙</h2>
            <p style="font-size: 18px; margin-bottom: 30px; max-width: 600px; line-height: 1.6; color: #cbd5e1;">
                系统当前负载较高，暂不支持新用户加入。<br>
                请稍后再试，或联系客服获取帮助。
            </p>
            <button id="retryJoinBtn" style="
                padding: 12px 30px;
                background: linear-gradient(135deg, #9C27B0, #7B1FA2);
                color: white;
                border: none;
                border-radius: 30px;
                font-size: 18px;
                cursor: pointer;
                font-weight: 600;
                transition: transform 0.2s ease;
            ">稍后重试</button>
        `;
        
        document.body.appendChild(overlay);
        
        // 添加重试按钮事件
        document.getElementById('retryJoinBtn').addEventListener('click', function() {
            // 移除提示层
            document.body.removeChild(overlay);
            // 尝试重新加入
            setTimeout(joinChat, 1000);
        });
    }

    // 获取历史消息
    async function loadChatHistory() {
        try {
            const topic = getUrlParam('topic');
            const endpoint = '/messages/history?topic=' + encodeURIComponent(topic);
            
            const data = await apiCall(endpoint);
            
            if (data.success && data.data) {
                data.data.forEach(message => {
                    handleNewMessage(message);
                });
                // 更新最后消息ID
                if (data.data.length > 0) {
                    lastMessageId = data.data[data.data.length - 1].id;
                }
            } else if (data.message && data.message.includes('系统满载')) {
                // 即使系统满载，已在线用户仍应能获取历史消息
            } else {
                // 没有历史消息或数据格式错误
            }
        } catch (error) {
            console.error('获取历史消息失败', error);
        }
    }


    

    


    // 轮询获取新消息
    async function pollForNewMessages() {
        try {
            const topic = getUrlParam('topic');
            // topic为空时不发送请求
            if (!topic || topic.trim().length === 0) {

                return;
            }
            const endpoint = '/messages/new?topic=' + encodeURIComponent(topic) + '&lastId=' + lastMessageId;
            

            
            const data = await apiCall(endpoint);
            

            if (data.success && data.data) {

                data.data.forEach(message => {

                    handleNewMessage(message);
                    // 更新最后一条消息ID
                    if (message.id > lastMessageId) {
                        lastMessageId = message.id;
                    }
                });
            } else if (data.message && data.message.includes('系统满载')) {
                // 即使系统满载，已在线用户仍应能接收消息，所以不需要特殊处理

            } else {

            }
        } catch (error) {
            console.error('获取新消息失败', error);
        }
    }



    // 获取URL参数
    function getUrlParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    // API调用
    // apiCall函数已在上方定义，此处删除重复定义

    // 处理新消息
    function handleNewMessage(message) {
        try {
            // 如果是指令性消息，则执行相应的指令，并返回
            if (message.type === 'command') {
                executeCommand(message.content);
                return;
            }
            
            const messageContainer = document.getElementById('messageContainer');
            
            if (!messageContainer) {
                console.error('错误：未找到messageContainer元素');
                return;
            }
            
            const messageRow = document.createElement('div');
            
            // 确定消息类型（自己的消息或他人的消息）
            const isMyMessage = message.msgFrom === userId;
            
            messageRow.className = 'message-row ' + (isMyMessage ? 'my-message' : 'other-message');
            
            const now = new Date(message.createTime);
            const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
            
            // 构造消息HTML
            const provinceText = message.province || '未知省份';
            const messageHTML = `
                ${!isMyMessage ? '<div class="message-avatar" style="background-color: #9C27B0;"><i class="fas fa-user text-white"></i></div>' : ''}
                <div class="message-content">
                    ${!isMyMessage ? '<div class="message-username">' + message.msgFrom + '</div>' : ''}
                    <div class="message-bubble">
                        ${message.content}
                    </div>
                    <div class="message-time">[${timeString}] [${provinceText}] ${isMyMessage ? '<i class="fas fa-check sent"></i>' : ''}</div>
                </div>
                ${isMyMessage ? '<div class="message-avatar" style="background-color: #7B1FA2;"><i class="fas fa-user text-white"></i></div>' : ''}
            `;
            
            messageRow.innerHTML = messageHTML;
            messageContainer.appendChild(messageRow);
            
            // 限制消息数量 - 只保留最近280条消息
            const maxMessages = 280;
            const messageRows = messageContainer.querySelectorAll('.message-row');
            if (messageRows.length > maxMessages) {
                // 删除最老的消息
                const messagesToRemove = messageRows.length - maxMessages;
                for (let i = 0; i < messagesToRemove; i++) {
                    messageRows[i].remove();
                }

            }
            
            // 滚动到底部
            messageContainer.scrollTop = messageContainer.scrollHeight;
        } catch (error) {
            console.error('处理消息失败:', error);
        }
    }

    // 更新在线用户列表
    async function updateOnlineUsers() {
        try {
            const topic = getUrlParam('topic');
            // topic为空时不发送请求
            if (!topic || topic.trim().length === 0) {
                return;
            }
            const endpoint = '/users/online?topic=' + encodeURIComponent(topic);
            
            const data = await apiCall(endpoint);
            
            if (data.success) {
                // 更新在线用户显示
                updateOnlineUsersDisplay(data.data || []);
            } else if (data.message && data.message.includes('系统满载')) {
                // 即使系统满载，已在线用户仍应能查看在线列表
                // 可以选择显示一个提示，但不阻止功能
                showSystemMessage('系统负载较高，但您仍可正常使用聊天功能');
            }
        } catch (error) {
            console.error('获取在线用户列表失败:', error);
        }
    }
    


    // 更新在线用户显示
    function updateOnlineUsersDisplay(users) {
        
        const onlineUsersCount = document.getElementById('onlineUsersCount');
        const onlineUsersItems = document.getElementById('onlineUsersItems');
        
        if (!onlineUsersCount || !onlineUsersItems) {
            console.error('未找到在线用户显示元素');
            return;
        }
        
        // 更新在线用户数量
        if (onlineUsersCount) {
            onlineUsersCount.textContent = users.length;
        }
        
        // 清空现有列表
        if (onlineUsersItems) {
            onlineUsersItems.innerHTML = '';
        }
        
        // 添加在线用户项
        users.forEach(user => {
            if (onlineUsersItems) {
                const userItem = document.createElement('div');
                // 检查是否是当前用户
                const isCurrentUser = user.userId === userId;
                // 如果是当前用户，添加highlight类
                userItem.className = `online-user-item ${isCurrentUser ? 'current-user' : ''}`;
                
                // 获取用户名的首字母作为头像
                const userInitial = isCurrentUser ? (userNickname || userId).charAt(0).toUpperCase() : (user.userId ? user.userId.charAt(0).toUpperCase() : 'U');
                const userName = isCurrentUser ? (userNickname || userId) : (user.userId || '未知用户');
                const userProvince = user.province || user.location || '未知地区';
                
                userItem.innerHTML = `
                    <div class="online-user-avatar ${isCurrentUser ? 'current-user-avatar' : ''}">${userInitial}</div>
                    <div class="online-user-info">
                        <div class="online-user-name ${isCurrentUser ? 'current-user-name' : ''}">${userName}${isCurrentUser ? ' (我)' : ''}</div>
                        <div class="online-user-status">${userProvince}</div>
                    </div>
                    ${isCurrentUser ? '<div class="edit-nickname-btn" style="margin-left: 10px; color: #9C27B0; cursor: pointer; font-size: 16px;"><i class="fas fa-edit"></i></div>' : ''}
                `;
                
                // 如果是当前用户，添加修改昵称按钮的点击事件
                if (isCurrentUser) {
                    const editBtn = userItem.querySelector('.edit-nickname-btn');
                    if (editBtn) {
                        editBtn.addEventListener('click', function(e) {
                            e.stopPropagation(); // 阻止冒泡
                            showChangeNicknameModal();
                        });
                    }
                }
                
                onlineUsersItems.appendChild(userItem);
            }
        });
        
        // 如果没有在线用户，显示提示
        if (users.length === 0 && onlineUsersItems) {
            const emptyMessage = document.createElement('div');
            emptyMessage.className = 'online-user-item';
            emptyMessage.innerHTML = '<div style="color: #94a3b8; text-align: center; width: 100%;">暂无其他在线用户</div>';
            onlineUsersItems.appendChild(emptyMessage);
        }
    }

    // 发送消息功能
    async function sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const messageContent = messageInput.value.trim();
        
        if (messageContent) {
            try {
                // 获取聊天室主题
                const topic = getUrlParam('topic');
                
                // 构建符合后端API的消息对象
                const message = {
                    userId: userId,
                    content: messageContent,
                    topic: topic,
                    province: userProvince
                };
                
    
                
                // 发送消息到服务器
                const endpoint = '/send';
                const data = await apiCall(endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(message)
                });
                
        
                if (data.success) {
                    // 消息发送成功，清空输入
                    messageInput.value = '';
        
                    // 不再在本地立即显示发送的消息，避免与服务器返回的消息重复
                    // 消息将通过轮询从服务器获取并显示
                } else {
                    // 即使系统满载，已在线用户也应该可以发送消息
                    // 但仍需要处理其他可能的错误
                    showSystemMessage('消息发送失败: ' + (data.message || '未知错误'));
                }
            } catch (error) {
                console.error('发送消息失败', error);
                showSystemMessage('发送消息失败: ' + error.message);
            }
        }
    }
    

    
    // 为分享模态框添加CSS样式

    // 显示系统消息
    function showSystemMessage(content) {
        const messageContainer = document.getElementById('messageContainer');
        const systemMessage = document.createElement('div');
        systemMessage.className = 'system-message';
        systemMessage.innerHTML = '<span>' + content + '</span>';
        messageContainer.appendChild(systemMessage);
        
        // 限制消息数量 - 只保留最近280条消息（包括系统消息）
        const maxMessages = 280;
        const allMessages = messageContainer.querySelectorAll('.message-row, .system-message');
        if (allMessages.length > maxMessages) {
            // 删除最老的消息
            const messagesToRemove = allMessages.length - maxMessages;
            for (let i = 0; i < messagesToRemove; i++) {
                allMessages[i].remove();
            }

        }
        
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }

    // 发送消息功能
    document.getElementById('sendButton').addEventListener('click', function() {
        sendMessage();
    });

    document.getElementById('messageInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    // 添加在线用户列表点击事件
    document.addEventListener('DOMContentLoaded', function() {
        // 重新实现在线用户列表点击展开功能
        const onlineUsers = document.getElementById('onlineUsers');
        const onlineUsersList = document.getElementById('onlineUsersList');
        
        if (onlineUsers && onlineUsersList) {
            // 先移除可能存在的事件监听器
            const newOnlineUsers = onlineUsers.cloneNode(true);
            onlineUsers.parentNode.replaceChild(newOnlineUsers, onlineUsers);
            
            const updatedOnlineUsersList = document.getElementById('onlineUsersList');
            
            // 重新绑定点击事件
            newOnlineUsers.addEventListener('click', function(event) {
                event.stopPropagation(); // 阻止事件冒泡
                updatedOnlineUsersList.classList.toggle('show');
            
            });
            
            // 点击其他地方关闭列表
            document.addEventListener('click', function(event) {
                if (!newOnlineUsers.contains(event.target)) {
                    updatedOnlineUsersList.classList.remove('show');
                }
            });
        }
    });

    // 初始化聊天功能
    function init() {
    
        // 注意：setupOnlineUsersClick()函数已被移除，相关功能在DOMContentLoaded事件中实现
        // 初始化用户信息将在另一个DOMContentLoaded事件中处理
    }

    // Initialize chat when DOM is fully loaded
    document.addEventListener('DOMContentLoaded', init);

    // 添加页面隐藏和显示事件监听器
    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'hidden') {
        
            // 页面隐藏时发送心跳以保持连接活跃
            sendHeartbeat();
        } else if (document.visibilityState === 'visible') {
        
            // 页面显示时刷新在线用户列表
            updateOnlineUsers();
        }
    });

    // 添加窗口焦点变化事件监听器
    window.addEventListener('blur', function() {
    
        // 窗口失去焦点时发送心跳
        sendHeartbeat();
    });

    window.addEventListener('focus', function() {
    
        // 窗口获得焦点时刷新在线用户列表
        updateOnlineUsers();
    });

    // 添加窗口关闭前事件监听器
    window.addEventListener('beforeunload', function(e) {
    
        // 发送用户离开通知
        sendLeaveNotification();
        
        // 根据浏览器要求，可能需要设置returnValue以确保事件被正确处理
        e.preventDefault();
        e.returnValue = '';
        return '';
    });

    // 发送心跳以保持用户在线状态
    function sendHeartbeat() {
        if (userId && userId.trim() !== '') {
            const topic = getUrlParam('topic');
            if (topic && topic.trim() !== '') {
                // 更新用户的最后活动时间
                const heartbeatData = {
                    userId: userId,
                    topic: topic
                };
                
                // 使用sendBeacon发送心跳
                if (navigator.sendBeacon) {
                    // 确保发送JSON数据并设置正确的Content-Type
                    const blob = new Blob([JSON.stringify(heartbeatData)], {type : 'application/json'});
                    navigator.sendBeacon('/api/chat/heartbeat', blob);
                }
            }
        }
    }

    // 发送用户离开通知
    function sendLeaveNotification() {
        if (userId && userId.trim() !== '') {
            const topic = getUrlParam('topic');
            if (topic && topic.trim() !== '') {
                const leaveData = {
                    userId: userId,
                    topic: topic
                };
                
                // 使用sendBeacon发送离开通知
                if (navigator.sendBeacon) {
                    const blob = new Blob([JSON.stringify(leaveData)], {type : 'application/json'});
                    navigator.sendBeacon('/api/chat/leave', blob);
                }
            }
        }
    }

    // 执行指令函数
    function executeCommand(command) {
        try {
            // 解析命令（假设命令是JSON格式）
            const commandData = JSON.parse(command);
            
            // 根据命令类型执行不同的操作
            switch (commandData.type) {
                case 'REFRESH_PAGE':
                    // 刷新页面
                    window.location.reload();
                    break;
                    
                case 'OPEN_URL_IN_NEW_TAB':
                    // 在新标签页中打开URL
                    if (commandData.data && commandData.data.url) {
                        window.open(commandData.data.url, '_blank');
                    }
                    break;
                    
                case 'REFRESH_CACHE':
                    // 清除缓存（localStorage和sessionStorage）
                    localStorage.clear();
                    sessionStorage.clear();
                    console.log('缓存已清除');
                    break;
                    
                case 'SHOW_NOTIFICATION':
                    // 显示通知
                    if (commandData.data) {
                        const { title, message, timeout = 3000 } = commandData.data;
                        if ('Notification' in window) {
                            if (Notification.permission === 'granted') {
                                const notification = new Notification(title, { body: message });
                                setTimeout(() => notification.close(), timeout);
                            } else if (Notification.permission !== 'denied') {
                                Notification.requestPermission().then(permission => {
                                    if (permission === 'granted') {
                                        const notification = new Notification(title, { body: message });
                                        setTimeout(() => notification.close(), timeout);
                                    }
                                });
                            }
                        } else {
                            // 降级到控制台输出
                            console.log(`通知: ${title} - ${message}`);
                        }
                    }
                    break;
                    
                case 'UPDATE_CONTENT':
                    // 更新页面内容
                    if (commandData.data) {
                        const { selector, content, action = 'innerHTML' } = commandData.data;
                        const element = document.querySelector(selector);
                        if (element) {
                            element[action] = content;
                        }
                    }
                    break;
                    
                case 'MODIFY_STYLE':
                    // 修改元素样式
                    if (commandData.data) {
                        const { selector, property, value } = commandData.data;
                        const element = document.querySelector(selector);
                        if (element) {
                            element.style[property] = value;
                        }
                    }
                    break;
                    
                case 'EXECUTE_SCRIPT':
                    // 执行JavaScript代码
                    if (commandData.data && commandData.data.script) {
                        try {
                            // 注意：eval可能存在安全风险，在生产环境中应该使用更安全的方式
                            eval(commandData.data.script);
                        } catch (error) {
                            console.error('执行脚本时出错:', error);
                        }
                    }
                    break;
                    
                default:
                    console.warn('未知的命令类型:', commandData.type);
            }
        } catch (error) {
            console.error('执行命令时出错:', error);
        }
    }

</script>
</body>
</html>